<template>
  <div class="revset">
    <PageHeader @back="goback" subTitle="返回"> 参保记录 </PageHeader>
    <div class="display-flex mt20" style="width: 100%">
      <!-- 左边区域 -->
      <div class="left_region ph20 calc_h100">
        <!-- 左侧头部信息区域 -->
        <div>
          <div class="display-flex flex_dir jc-sb ai-center" style="font-size: 18px">
            <a-avatar :size="64" icon="user" :src="PersonalData.empPhoto" style="margin-bottom: 10px" />
            {{ PersonalData.name || "-" }}
          </div>
          <div class="expend-box-detailed">
            社保{{ getPostTypeNew(PersonalData.empSocStatus) }} / 医保{{ getPostTypeNew(PersonalData.empMeStatus) }} / 公积金{{
              getPostTypeNew(PersonalData.empPfStatus)
            }}
          </div>
          <div class="expend-box-detailed">{{ PersonalData.postType | filtersOptions(postTypeLst) }}</div>
          <a-divider dashed />
          <div>
            <div class="display-flex lh26">
              <div class="w60_mr10_left">身份证号</div>
              <div>{{ PersonalData.idCard || "-" }}</div>
            </div>
            <div class="display-flex lh26">
              <div class="w60_mr10_left">手机号</div>
              <div>{{ PersonalData.phone || "-" }}</div>
            </div>
            <div class="display-flex lh26">
              <div class="w60_mr10_left">社保编号</div>
              <div>{{ PersonalData.socCard || "-" }}</div>
            </div>
            <div class="display-flex lh26">
              <div class="w60_mr10_left">公积金编号</div>
              <div>{{ PersonalData.pfCard || "-" }}</div>
            </div>
            <div class="display-flex lh26">
              <div class="w60_mr10_left">参保方案</div>
              <div>{{ PersonalData.socProgName || "-" }}</div>
            </div>
            <div class="display-flex lh26">
              <div class="w60_mr10_left">参保城市</div>
              <div>{{ PersonalData.socCityName || "-" }}</div>
            </div>
            <div class="display-flex lh26">
              <div class="w60_mr10_left">参保时间</div>
              <div>{{ formatDate(PersonalData.socDate) || "-" }}</div>
            </div>
          </div>
          <a-divider />
          <div style="text-align: center">
            <a-button @click="material"> 个人档案 </a-button>
          </div>
        </div>
      </div>
      <!-- 右边区域 -->
      <div class="ph20" style="width: 100%">
        <!-- 右侧头部统计 -->
        <div class="flex-center-between top_warp_t wp100">
          <div class="width20 ta-center" v-for="(item, index) in topData" :key="index">
            <div class="title">{{ item.title }}</div>

            <span
              :class="item.title === '合计' ? 'isColor' : ''"
              style="font-size: 18px; font-family: DINAlternate-Bold, DINAlternate; font-weight: bold"
            >
              {{ item.num }}
            </span>
          </div>
        </div>
        <!-- 导出按钮  -->
        <div class="mv16">
          <a-button type="primary" @click="onExport" :disabled="selectedRowKeys.length > 0 ? false : true"> 导出 </a-button>
        </div>

        <!-- 列表信息区域 -->
        <div>
          <!-- 表格区域 -->
          <a-table
            rowKey="empSocInfoId"
            :loading="loading"
            :data-source="tableData"
            :scroll="{ x: 500, y: 800 }"
            :row-selection="{
              onChange: (selectedRowKeys, selectedRows) => tableChange(selectedRowKeys, selectedRows)
            }"
            :pagination="false"
          >
            <a-table-column title="参保时间" align="center" width="100px" :ellipsis="true">
              <template slot-scope="scope"> {{ scope.year }}-{{ scope.month }} </template>
            </a-table-column>
            <a-table-column title="缴费类型" align="center" width="100px" :ellipsis="true">
              <template slot-scope="scope">
                <a-tooltip>
                  <template slot="title">
                    {{ scope.payCostType | filtersOptions(payTypeOptions) }}
                  </template>
                  {{ scope.payCostType | filtersOptions(payTypeOptions) }}
                </a-tooltip>
              </template>
            </a-table-column>
            <a-table-column title="参保方案" align="center" width="100px" :ellipsis="true">
              <template slot-scope="scope">
                <a-tooltip>
                  <template slot="title">
                    {{ scope.socProgName || "-" }}
                  </template>
                  {{ scope.socProgName || "-" }}
                </a-tooltip>
              </template>
            </a-table-column>
            <a-table-column title="参保城市" align="center" width="100px" :ellipsis="true">
              <template slot-scope="scope">
                <a-tooltip>
                  <template slot="title">
                    {{ scope.socCityName || "-" }}
                  </template>
                  {{ scope.socCityName || "-" }}
                </a-tooltip>
              </template>
            </a-table-column>
            <a-table-column title="单位社保" align="center" width="100px" :ellipsis="true">
              <template slot-scope="scope">
                {{ scope.companySocAmount }}
              </template>
            </a-table-column>
            <a-table-column title="个人社保" align="center" width="100px" :ellipsis="true">
              <template slot-scope="scope">
                {{ scope.personalSocAmount }}
              </template>
            </a-table-column>
            <a-table-column title="单位公积金" align="center" width="135px" :ellipsis="true">
              <template slot-scope="scope">
                {{ scope.companyPfAmount }}
              </template>
            </a-table-column>
            <a-table-column title="个人公积金" align="center" width="135px" :ellipsis="true">
              <template slot-scope="scope">
                {{ scope.personalPfAmount }}
              </template>
            </a-table-column>
            <a-table-column title="社保总计" align="center" width="100px" :ellipsis="true">
              <template slot-scope="scope">
                {{ scope.socAmount }}
              </template>
            </a-table-column>
            <a-table-column title="公积金总计" align="center" width="135px" :ellipsis="true">
              <template slot-scope="scope">
                {{ scope.pfAmount }}
              </template>
            </a-table-column>
            <a-table-column title="" width="80px" fixed="right" align="center">
              <template slot-scope="scope">
                <a-popover placement="bottomRight">
                  <template slot="content">
                    <a-table size="small" :data-source="scope.empSocItemVOList" :pagination="false" rowKey="id">
                      <a-table-column title="缴纳项目" align="center" ellipsis>
                        <template slot-scope="scopes">
                          {{ scopes.itemName || "-" }}
                        </template>
                      </a-table-column>
                      <a-table-column title="个人缴纳基数" align="center" ellipsis>
                        <template slot-scope="scopes">
                          {{ scopes.cardinalityDefault }}
                        </template>
                      </a-table-column>
                      <a-table-column title="个人比例" align="center" ellipsis v-if="!scope.onlySocAmount">
                        <template slot-scope="scopes">
                          {{ scopes.persentPersonal }}
                        </template>
                      </a-table-column>
                      <a-table-column title="公司比例" align="center" ellipsis v-if="!scope.onlySocAmount">
                        <template slot-scope="scopes">
                          {{ scopes.persentCompany }}
                        </template>
                      </a-table-column>
                      <a-table-column title="个人缴费" align="center" ellipsis>
                        <template slot-scope="scopes">
                          {{ scopes.amountPersonal }}
                        </template>
                      </a-table-column>
                      <a-table-column title="公司缴费" align="center" ellipsis>
                        <template slot-scope="scopes">
                          {{ scopes.amountCompany }}
                        </template>
                      </a-table-column>
                    </a-table>
                  </template>
                  <a-icon class="pointer" type="up-circle" />
                </a-popover>
              </template>
            </a-table-column>
          </a-table>
          <!-- 分页 -->
          <div class="ta-right mt16">
            <a-pagination
              :current="queryParams.pageNo"
              show-quick-jumper
              show-size-changer
              :default-current="1"
              @change="onChange"
              :pageSizeOptions="['10', '20', '50', '100']"
              :total="total"
              @showSizeChange="showSizeChange"
              :show-total="(total) => `共 ${total} 条`"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { formatDate } from "@/utils/index";
import { socTypeSource } from "./../funcs";
import { selectEmpSocBriefly, EmpSocInfoByEmpId, selectEmpSocInfoByEmpIdCount, Enum } from "./api";

export default {
  data() {
    return {
      selectedRowKeys: [],
      empId: "",
      PersonalData: {},
      loading: false,
      empSocStatusOptions: [], // 社保状态枚举
      payTypeOptions: [], // 缴费类型枚举
      progTypeOptions: [], // 参保方案枚举
      // 查询参数
      queryParams: {
        companyId: this.$store.state.hr.companyId,
        pageNo: 1,
        pageSize: 10,
        empId: ""
      },
      topData: [
        {
          title: "个人社保累计",
          num: 0
        },
        {
          title: "单位社保累计",
          num: 0
        },
        {
          title: "个人公积金累计",
          num: 0
        },
        {
          title: "单位公积金累计",
          num: 0
        },
        {
          title: "合计",
          num: 0
        }
      ],
      // 总条数
      total: 0,
      // 查询社保名单表格数据
      tableData: [],
      disable: true
    };
  },
  computed: {
    postTypeLst() {
      return this.$store.state.enums.postTypeLst;
    }
  },
  created() {
    this.empId = this.$route.params.empId;
    this.queryParams.empId = this.$route.params.empId;
    if (this.$route.query.disable) {
      this.disable = this.$route.query.disable === "true";
    }
    this.getEnum();
    this.getSelectEmpSocListCount();
  },
  filters: {
    // 过滤枚举
    filtersOptions(a, b) {
      const data = b.filter((item) => item.value === a);
      return data.length > 0 ? data[0].label : "-";
    }
  },
  methods: {
    getPostTypeNew(val) {
      return socTypeSource[val]["label"];
    },
    formatDate(text) {
      const time = formatDate(text);
      const index = time.lastIndexOf("-");
      return time.substr(0, index);
    },
    material() {
      if (this.disable) {
        const data = {
          queryType: 1,
          companyId: this.$store.state.hr.companyId,
          pageNo: 1,
          pageSize: 10,
          empId: this.empId
        };
        this.$router.push({
          path: "/staff/detail",
          query: {
            id: this.empId,
            isDelete: true,
            prevpage: location.hash.slice(1)
          }
        });
      } else {
        this.$message.error("员工已被删除");
      }
    },
    goback() {
      console.log(this.$route);
      if (this.$route.query.prevpage) {
        this.$router.push({
          path: this.$route.query.prevpage,
          query: {
            id: this.$route.query.id,
            month: this.$route.query.month,
            year: this.$route.query.year
          }
        });
      } else {
        this.$router.go(-1);
      }
    },
    onExport() {
      this.$exportFile(
        `/hr/api/v1/empSocTransform/empSocDetailsExport?companyId=${this.$store.state.hr.companyId}&empId=${this.empId}&empSocInfoIdList=${this.selectedRowKeys}`
      );
    },
    tableChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys;
    },
    // 获取枚举请求
    getEnum() {
      Enum(this.$store.state.hr.companyId)
        .then((res) => {
          this.payTypeOptions = [];
          this.progTypeOptions = [{ value: 999, label: "无参保方案" }];
          this.empSocStatusOptions = [];
          if (Object.keys(res.data.socPayCostTypeMap).length > 0) {
            for (const key in res.data.socPayCostTypeMap) {
              this.payTypeOptions.push({
                value: res.data.socPayCostTypeMap[key],
                label: key
              });
            }
          }

          if (Object.keys(res.data.empSocStatusMap).length > 0) {
            for (const key in res.data.empSocStatusMap) {
              this.empSocStatusOptions.push({
                value: res.data.empSocStatusMap[key],
                label: key
              });
            }
          }

          if (Object.keys(res.data.socProgMap).length > 0) {
            for (const key in res.data.socProgMap) {
              this.progTypeOptions.push({
                value: res.data.socProgMap[key],
                label: key
              });
            }
          }
          this.getPersonalData();
          this.getList();
        })
        .catch((err) => {
          console.log("debug log --> ", err);
        });
    },
    // 查询社保名单顶部数量统计
    getSelectEmpSocListCount() {
      selectEmpSocInfoByEmpIdCount({
        companyId: this.$store.state.hr.companyId,
        empId: this.empId
      })
        .then((res) => {
          this.topData[0].num = res.data.personalSocAmount || 0;
          this.topData[1].num = res.data.companySocAmount || 0;
          this.topData[2].num = res.data.personalPfAmount || 0;
          this.topData[3].num = res.data.companyPfAmount || 0;
          this.topData[4].num = res.data.allAmount || 0;
        })
        .catch((err) => {
          console.log("debug log --> ", err);
          this.$message.error("失败!");
        });
    },
    // 个人资料
    getPersonalData() {
      selectEmpSocBriefly({
        empId: this.empId
      })
        .then((res) => {
          this.PersonalData = res.data;
        })
        .catch((err) => {
          console.log("debug log --> ", err);
          this.$message.error("失败!");
        });
    },
    /** 查询社保名单列表 */
    getList() {
      this.loading = true;
      EmpSocInfoByEmpId(this.queryParams)
        .then((res) => {
          this.tableData = res.data.entities;
          this.total = res.data.entityCount;
          setTimeout(() => {
            this.loading = false;
          }, 500);
        })
        .catch((err) => {
          console.log("debug log --> ", err);
          this.$message.error("查询社保名单列表失败!");

          setTimeout(() => {
            this.loading = false;
          }, 500);
        });
    },
    showSizeChange(current, size) {
      this.queryParams.pageNo = 1;
      this.queryParams.pageSize = size;
    },
    // 分页变化
    onChange(pageNumber) {
      this.queryParams.pageNo = pageNumber;
      this.getList();
    }
  }
};
</script>

<style lang="scss">
.expend-box-detailed {
  display: flex;
  justify-content: center;
  color: #a6a8b4;
  font-size: 12px;
  margin-top: 5px;
}
.revset {
  padding-left: 24px;
  padding-right: 24px;
  padding-top: 0px;
  padding-bottom: 0px;
  background-color: #fff;
  overflow-y: auto;
}
.isColor {
  color: var(--primary) !important;
}
.left_region {
  width: 20%;
}
.warp {
  overflow-y: auto;
  #components-layout-demo-basic .ant-layout-sider {
    width: 330px !important;
  }
  .left_region {
    width: 100px;
  }
  .top_warp_t {
    padding: 25px 0;
    background: #ffffff;
    border-radius: 4px;
    border: 1px solid #e8e8e8;
    .title {
      font-size: 14px;
      font-family: SourceHanSansCN-Normal, SourceHanSansCN;
      font-weight: 400;
      color: #a6a8b4;
      line-height: 21px;
      margin-bottom: 10px;
    }
    .top_number {
      font-size: 18px;
      font-family: DINAlternate-Bold, DINAlternate;
      font-weight: bold;
      color: #55565d;
    }
  }
}
.top_warp_t {
  padding: 25px 0;
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid #e8e8e8;
  .title {
    font-size: 14px;
    font-family: SourceHanSansCN-Normal, SourceHanSansCN;
    font-weight: 400;
    color: #a6a8b4;
    line-height: 21px;
    margin-bottom: 10px;
  }
  .top_number {
    font-size: 18px;
    font-family: DINAlternate-Bold, DINAlternate;
    font-weight: bold;
    color: #55565d;
  }
}
</style>
